<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
    <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="static/util.js"></script>
</head>
<body>
<%
    String username = String.valueOf(session.getAttribute("username"));
%>
<table id="dg" class="easyui-datagrid" data-options="toolbar:'#tb'">
</table>
<div id="tb" style="padding:5px;height:auto">
    <div>
        开始日期: <input class="easyui-datebox" id="startDate" style="width:140px">
        结束日期: <input class="easyui-datebox" id="endDate" style="width:140px">
        物品类别:
        <select class="easyui-combobox" name="goodsType"
                id="goodsType" style="width: 200px;">
        </select>
        <a href="javascript:chooseScale()" class="easyui-linkbutton"
           >选取范围</a>
        <a href="javascript:search()" class="easyui-linkbutton"
           data-options="iconCls:'icon-search'">查询</a>
        <a href="javascript:reset()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">清空</a>
    </div>
</div>
<script>
  $(function () {
    // 页面进来加载物品类别下拉条
    $.ajax({
      type: "get",
      url: "goodsType/list",
      success: function (response) {
        $('#goodsType').combobox({
          data: response.data,
          valueField: 'id',
          textField: 'name'
        });
      }
    });

    $('#dg').datagrid({
      nowrap: false,
      pagination: true,
      pageList: [2, 5, 10, 20, 30],
      pageSize: 5,
      url: "lost/page",
      showHeader: true,
      columns: [[
        {field: 'goodsType', title: '物品种类', width: 150},
        {
          field: 'address', title: '地点', width: 600, formatter: function (value, row, index) {
            var options = {
              width: 1000,
              height: 500,
              title: "查看地点",
              url: "manage/showLocation.jsp?lng=" + row.lng + "&lat=" + row.lat
            };
            return "<a href='javascript:openTopWindow(" + JSON.stringify(options) + ")'>" + value
                + "</a>"
          }
        },
        {field: 'username', title: '拾取人姓名', width: 80},
        {field: 'lostTime', title: '时间', width: 200},
        {
          field: 'fileName', title: '图片', width: 200, formatter: function (value, row, index) {
            var options = {
              width: 1000,
              height: 500,
              title: "查看图片",
              url: "manage/showImage.jsp?fileName=" + row.fileName
            };

            return "<button onclick='openTopWindow(" + JSON.stringify(options) + ")'>" + "查看图片"
                + "</button>";
          }
        },
        {
          field: 'operation', title: '操作', width: 200, formatter: function (value, row, index) {
            var value = "<button onclick='showDetail(" + row.id + ")'>查看详情</button>&emsp;";
            value += "<button onclick='removeLost(" + row.id + ")'>删除</button>&emsp;"
            + "<button onclick='editLost(" + row.id + ")'>修改</button>"

            return value;
          }
        }
      ]]
    });

  });

  function search() {
    var goodsType = $('#goodsType').combobox('getValue');
    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    $('#dg').datagrid('load', {
      "goodsTypeId": goodsType,
      "startDate": startDate,
      "endDate": endDate,
      "points": localStorage.points
    })
  }

  function reset() {
    $('#goodsType').combobox('clear');
    $('#startDate').datebox('setValue', '');
    $('#endDate').datebox('setValue', '');
    localStorage.points = "";
  }

  function showDetail(id) {
    openTopWindow({
      url: 'manage/showLostDetail.jsp?id=' + id,
      title: '失物招领详情'
    })
  }

  function removeLost(id) {
    $.messager.confirm('提示', '确认删除？', function (r) {
      if (r) {
        $.ajax({
          url: 'lost/delete.do',
          type: 'post',
          data: {id: id},
          success: function (response) {
            $.messager.alert('提示信息', response.message, 'info', function () {
              $('#dg').datagrid('reload');
            });
          }
        })
      }
    });
  }

  function editLost(id) {
    openTopWindow({
      url: 'manage/editLost.jsp?id=' + id,
      title: '失物招领编辑',
      fit: true
    })
  }

  function chooseScale() {
    openTopWindow2({
      url: 'manage/chooseScale.jsp',
      title: '选择范围',
      fit: true
    })
  }

  /* 在父窗口中打开window */
  function openTopWindow2(options) {
    options = !options ? {} : options;
    options.width = !options.width ? 500 : options.width;
    options.height = !options.height ? 400 : options.height;
    options.url = !options.url ? "404.html" : options.url;
    options.title = !options.title ? "" : options.title;
    options.fit = !options.fit ? false : options.fit;
    parent.$("#topWindow").window({
      title : options.title,
      left: 0,
      top: 0,
      width : options.width,
      height : options.height,
      content : "<iframe scrolling='no' frameborder='0' border='0' height='100%' width='100%' src='"
          + options.url + "'></iframe>",
      modal : true,
      resizable : true,
      collapsible : false,
      fit: options.fit,
      onOpen: function () {
        console.log("加载成功");
      },
      onClose: function () {
        console.log(localStorage.points);
      }
    });
  }

</script>
</body>
</html>